<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	img{
		height: 50px;
	}
	.demonstration{
		margin-right:15px;
		margin-left:15px;
	}
	.vipmassge{
		margin-right:15px ;
	}
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		margin-right: 100px;
	}
	.item1,.item2{
		// margin-top: 30px;
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}
	.el-table{
		width: 100vh;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.tableclass{
		display: flex;
		margin-top: 10px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	.el-table .cell{
		text-align: center !important;
	}
	.mya{
		display: inline-block;
		margin-right: 10px;
		color: #4b5db9;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <div v-if="flag">
			 <h3>
			 	分销商品
			</h3>
			<div class="item1">
				<el-form-item label="商品名称" label-width="90">
					<el-input
						placeholder="请输入商品名称"
						v-model="goodsname"
					>	
					</el-input>
				</el-form-item>
				
				<el-form-item label="商品分类" label-width="90" >
				  <el-tree-select
				      v-model="goodsclazz"
				      :data="options"
				      :render-after-expand="false"
				  	placeholder="请选择商品分类"
				  	check-strictly
				  	show-checkbox
				      style="width: 200px"
				    />
				 	</el-form-item>
				</div>
				<el-form-item label="商品类型" label-width="90">
					<el-select v-model="goodskinds" placeholder="请选择商品类型" style="width: 200px;">
					   <el-option
					     v-for="item in options1"
					     :key="item.value"
					     :label="item.label"
					     :value="item.value"
					     :disabled="item.disabled"
					   />
					 </el-select>
					 <el-button
					 type="primary"
					 @click="searchback"
					 >搜索</el-button>
					 <el-button
					 @click="replay"
					 >重置</el-button>
				</el-form-item>
				
			 	
			
			
			<div style="margin: 20px 0px 0px 10px;display: flex;">
				<el-checkbox-group v-model="checkList">
				    <el-checkbox label="参与" value="Value1" @click="join"/>
				    <el-checkbox label="不参与" value="Value2" @click="nojoin" />
				</el-checkbox-group>
				<el-button type="primary" @click="addjoin">批量参与分销</el-button>
				<el-button type="danger" @click="canceljoin">批量取消分销</el-button>
			</div>
			
			<el-table
			    ref="multipleTableRef"
			    :data="tableData"
			    style="width: 100%"
			    @selection-change="handleSelectionChange"
				height="45vh"
			  >
			   <el-table-column type="selection" width="55"/>
			    <!-- <el-table-column 
				type="selection" width="55" 
				@select-all="handleSelectAll" 
				@select="handleSelect">
				</el-table-column> -->
				
			    <el-table-column label="商品" width="200">
					<template #default="{ row }">
						<img :src="downloadUrl+row.goodsImage" class="avatar" />
						{{row.goodsName}}
					</template>
				</el-table-column>
				<el-table-column label="商品类型">
					<template #default="{ row }">
						{{row.goodsVirtual}}
					</template>
				</el-table-column>
				<el-table-column label="价格">
					<template #default="{ row }">
						￥{{row.priceValue}}
					</template>
				</el-table-column>
				<el-table-column prop="goodsScore" label="库存"></el-table-column>
				<el-table-column prop="priceVolume" label="销量"></el-table-column>
				<el-table-column prop="goodsState" label="状态"></el-table-column>
				<el-table-column label="是否参与">
					<template #default="{ row }">
						{{row.goodsDistribution=="0" ? "不参与" : "参与"}}
						<!--{{row.goodsDistributuon==0 ? "000" : "111"}} -->
						<!-- {{row.defaultDistribution=="0" ? "默认设置" : "单独设置"}} -->
					</template>
				</el-table-column>
				<el-table-column label="参与规则">
					<template #default="{ row }">
						{{row.defaultDistribution=="0" ? "默认设置" : "单独设置"}}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="{ row }">
						<div  v-if="row.showdel==1">
							<span class="mya" @click="disgoodsdel(row)">详情</span>
							<span class="mya" @click="commissionset(row)">佣金设置</span>
						</div>
						<div  v-else>
							<span class="mya" @click="commissionset(row)">佣金设置</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
				<el-dialog v-model="dialogFormVisible1" title="提示" width="500">
				    <el-form>
						<p style="text-align: center;">确认选中商品参与分销吗?</p>
				    </el-form>
					<template #footer>
					  <div class="dialog-footer">
					    <el-button @click="dialogFormVisible1 = false">取消</el-button>
					    <el-button type="primary" @click="joinsuer">
					      确定
					    </el-button>
					  </div>
					</template>
				</el-dialog>
				<el-dialog v-model="dialogFormVisible2" title="提示" width="500">
				    <el-form>
						<p style="text-align: center;">确认选中商品取消分销吗?</p>
				    </el-form>
					<template #footer>
					  <div class="dialog-footer">
					    <el-button @click="dialogFormVisible2 = false">取消</el-button>
					    <el-button type="primary" @click="concelsuer">
					      确定
					    </el-button>
					  </div>
					</template>
				</el-dialog>
			</div>
			
			<DisgoodsDetail v-else @update-message="handleMessageUpdate" @regetlist="getidsgoodsList"></DisgoodsDetail>
			<!-- <DisgoodsDetail v-else @update-message="handleMessageUpdate"></DisgoodsDetail> -->
		 </el-main>
	   </el-container>
	 </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { ref,reactive,onMounted} from 'vue'
import {Search,Lock,Calendar} from '@element-plus/icons-vue'
import {
		GoodClassCase,
		disgoodslist,
		disgoodsDel,
		DisgoodsDelLevel,
		addgoodJoin,
		concelgoodJoin
	} from "@/api";
import { downloadUrl,baseUrl } from "@/utils/request";
import DisgoodsDetail from "./DisgoodsDetail.vue"
import { ElMessage } from 'element-plus';
const flag=ref(true)
const disgoodsdel=async (row)=>{
	sessionStorage.setItem("DelRe",1)
	sessionStorage.setItem("GoodInfo",JSON.stringify(row))
	// sessionStorage.setItem("GooDID",row.goodsId)
	// console.log(row);
	let res=await DisgoodsDelLevel(row.goodsId)
	// console.log("111",res)
	
	sessionStorage.setItem("disgoodsDelLevel",JSON.stringify(res))
	flag.value=false
	// let res = await disgoodsDel({
	// 	siteId: Number(sessionStorage.getItem("siteId")),
	// 	"goodsId":row.goodsId
	// })
	// console.log(res)
}
const commissionset = async(row)=>{
	sessionStorage.setItem("DelRe",2)
	sessionStorage.setItem("GoodInfo",JSON.stringify(row))
	let res=await DisgoodsDelLevel(row.goodsId)
	// console.log("222",res)
	sessionStorage.setItem("disgoodsDelLevel",JSON.stringify(res))
	flag.value=false
}

function handleMessageUpdate (newMessage) {
	flag.value = newMessage;
}
let pageIndex=ref(1);
let pageSize=10;
let total=ref(0)
let tableData = ref([])
const imageUrl = ref('')
const goodsname=ref('')
const goodsclazz=ref('')
const goodskinds=ref('')

//获取分销商品列表
const getidsgoodsList = async () => {
	let res = await disgoodslist({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		siteId: Number(sessionStorage.getItem("siteId")),
		goodsName:goodsname.value,
		"separateId":Number(goodsclazz.value),
		goodsVirtual:goodskinds.value,
	})
	if(res.goodsList==null){
		tableData.value = res.goodsList
	}else{
		res.goodsList.forEach(v=>{
			if(v.goodsDistribution==1){
				v.showdel=1
			}
		})
		tableData.value = res.goodsList
		total.value = res.pageCount
	}
	// console.log(res);
}

let multipleTableRef = ref()
let multipleSelection = ref([])
let handleSelectionChange = (val) => {
  multipleSelection.value = val
  // console.log("val",val)
}

//批量参与分销

const addjoin= async ()=>{
	dialogFormVisible1.value=true
}
//批量取消分销
const canceljoin= async ()=>{
	dialogFormVisible2.value=true
}
const dialogFormVisible1=ref(false)
const joinsuer= async()=>{
	let arr=[]
	multipleSelection.value.forEach(row=>{
		arr.push(row.goodsId)
	})	
	let res=await addgoodJoin(arr)
	if(typeof(res)=="object"){
		ElMessage({
			message:"操作成功",
			type:"success"
		})
	}
	getidsgoodsList()
	dialogFormVisible1.value=false
	// console.log("批量参与",res)
}
const dialogFormVisible2=ref(false)
const concelsuer= async()=>{
	let arr=[]
	multipleSelection.value.forEach(row=>{
		arr.push(row.goodsId)
	})	
	let res=await concelgoodJoin(arr)
	if(typeof(res)=="object"){
		ElMessage({
			message:"操作成功",
			type:"success"
		})
	}
	dialogFormVisible2.value=false
	// console.log("批量取消",res)
	getidsgoodsList()
}


//参与分销//不参与分销
const Value1=ref(false)
const Value2=ref(false)

const join=async ()=>{
	Value1.value=!Value1.value
	let data=[]
	let res = await disgoodslist({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		siteId: Number(sessionStorage.getItem("siteId")),
	})
	// console.log(res.goodsList);
	if(Value1.value==true && Value2.value==false){
		res.goodsList.forEach(v=>{
			if(v.goodsDistribution==1){
				data.push(v)
				// console.log(123)
			}
			// console.log(data)
			 tableData.value = data
		})
	}
	else if(Value2.value==true && Value1.value==false){
		res.goodsList.forEach(v=>{
			if(v.goodsDistribution==0){
				data.push(v)
				// console.log(123)
			}
			// console.log(data)
			 tableData.value = data
		})
	}
	else{
		getidsgoodsList ()
	}
}
const nojoin=async ()=>{
	Value2.value=!Value2.value
	let data=[]
	let res = await disgoodslist({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		siteId: Number(sessionStorage.getItem("siteId")),
	})
	// console.log(res.goodsList);
	if(Value2.value==true && Value1.value==false){
		res.goodsList.forEach(v=>{
			if(v.goodsDistribution==0){
				data.push(v)
				// console.log(123)
			}
			// console.log(data)
			 tableData.value = data
		})
	}else if(Value1.value==true && Value2.value==false){
		
		res.goodsList.forEach(v=>{
			if(v.goodsDistribution==1){
				data.push(v)
				// console.log(123)
			}
			// console.log(data)
			 tableData.value = data
		})
	}
	else{
		getidsgoodsList ()
	}
}

const searchback=async()=>{
	getidsgoodsList()
}
const checkList=ref()

//商品分类
let options = ref([])
	let frist = []
let goodsclass = async ()=>{
	let rep = await GoodClassCase(1)
	// console.log("商品分类",rep)
	// options.value= rep;
	frist=[]
	rep.forEach(v=>{
		v.z=[]
		if(v.separateSuperior=="0" ){
			frist.push(v)
		}
	})
	frist.forEach((v,index)=>{
		rep.forEach((v2,index)=>{
			if(v2.separateSuperior && v.separateId){
				if(Number(v2.separateSuperior)  == Number(v.separateId) ){
					v.z.push(v2)
					// console.log("v2",v2)
				}
			}
		})
		
	})
	// console.log("first.....",frist)
	let setData=ref([])
	for(var i=0;i<frist.length;i++){
		var firstObj = {
			value:frist[i].separateId,
			label:frist[i].separateName,
			children:[]
		}
		if(frist[i].z.length != 0){
			for(var j=0;j<frist[i].z.length;j++){
				var secondObj = {
					value:frist[i].z[j].separateId,
					label:frist[i].z[j].separateName,
				}
				firstObj.children.push(secondObj)
			}
		}
		setData.value.push(firstObj)
	}
	// console.log("商品分类下拉11111",setData.value)
	options.value=setData.value
	// console.log(options.value)
}
//商品类型
let options1 = ref([
	 {
		value: '实物商品',
		label: '实物商品',
	},
	{
		value: '虚拟商品',
		label: '虚拟商品',
	},
])


const replay=async()=>{
	goodsname.value=''
	goodsclazz.value=''
	goodskinds.value=''
	getidsgoodsList()
}


onMounted(() => {
	// sessionStorage.removeItem("DelRe")
	goodsclass()
	getidsgoodsList()
})
//获取分页
const changePage=(page)=>{
	// console.log(page)
	pageIndex.value=page;
	getidsgoodsList()
}

	

   //  const selectedItems = ref([]);
   //  const handleSelectAll = (selection) => {
   //    selectedItems.value = selection;
	  // console.log(selection)
   //  };
   //  const handleSelect = (selection, row) => {
   //    selectedItems.value = selection;
	  // console.log(selection,row)
   //  };
</script>
